<template>
  <div class="login-container">
    <el-card class="login-card">
      <el-tag class="login-title" size="large" round>用户登录</el-tag>
      <el-form :model="formData" :rules="rules" ref="formDataRef">
        <el-form-item prop="account">
          <el-input
            placeholder="请输入账号"
            v-model="formData.account"
            :prefix-icon="User"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            show-password
            placeholder="请输入密码"
            v-model="formData.password"
            :prefix-icon="Lock"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkCode">
          <el-input
            class="login-code"
            placeholder="请输入验证码"
            v-model="formData.checkCode"
            @keyup.enter="login"
          ></el-input>
          <el-image
            class="code-image"
            style="width: 35%; height: 30px"
            :src="checkCodeUrl"
            fit="fill"
            @click="changeCodeImage"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="formData.rememberMe"
            :true-label="1"
            label="记住我"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="login-button" type="primary" @click="login" :disabled="isLogining"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onBeforeMount } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import VueCookies from "vue-cookies";
import md5 from "js-md5";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
const api = {
  checkCodeUrl: "api/checkCode",
  login: "/login",
};
const router = useRouter();
let isLogining=ref(false)

// 图片验证码相关
const checkCodeUrl = ref(api.checkCodeUrl);
function changeCodeImage() {
  checkCodeUrl.value = api.checkCodeUrl + "?" + new Date().getTime();
}

//表单相关
const formData = reactive({
  account: "",
  password: "",
  checkCode: "",
});
const formDataRef = ref(null);
const rules = {
  account: [{ required: true, message: "用户名不能为空！", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空！" }],
  checkCode: [{ required: true, message: "验证码不能为空！" }],
};

// 读取cookies
onBeforeMount(() => {
  const loginInfo = VueCookies.get("loginInfo");
  if (!loginInfo) {
    return;
  }
  Object.assign(formData, loginInfo);
});

// 登陆验证
const login = () => {
  isLogining.value=true
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      isLogining.value=false
      return;
    }
    let cookiePassword = VueCookies.get("loginInfo") ? VueCookies.get("loginInfo").password : null;

    if (formData.password !== cookiePassword) {
      formData.password = md5(formData.password);
    }

    let result = await proxy.Request({
      url: api.login,
      params: {
        account: formData.account,
        password: formData.password,
        checkCode: formData.checkCode,
      },
      errorCallback: () => {
        changeCodeImage();
      },
    });
    if (!result) {
      isLogining.value=false
      return
    };

    VueCookies.set("userInfo", result.data, 0);

    if (formData.rememberMe === 1) {
      const loginInfo = {
        account: formData.account,
        password: formData.password,
        rememberMe: formData.rememberMe,
      };
      VueCookies.set("loginInfo", loginInfo, "7d");
    }

    proxy.$message({
      message: "登陆成功",
      type: "success",
    });

    // 页面跳转
    setTimeout(() => {
      router.push("/");
    }, 1500);    
  });
};
</script>

<style scoped>
.login-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(@/assets/LoginBackground.jpg);
  background-size: cover;
  background-position: center;
}
.login-card {
  position: absolute;
  top: 50%;
  right: 10%;
  width: 400px;
  height: 330px;
  transform: translateY(-50%);
  opacity: 0.8;
}
.login-title {
  margin-bottom: 10px;
  margin-left: 25%;
  width: 50%;
  font-size: large;
}
.login-code {
  width: 60%;
  margin-right: 5%;
}
.code-image:hover {
  cursor: pointer;
}
.login-button {
  width: 100%;
}
</style>